<template>
  <div class="invite_box">
    <van-nav-bar title="邀请好友" left-arrow fixed @click-left="onClickLeft" />
    <!-- 轮播图 -->
    <div class="swiper" id="swiper1" v-if="background">
      <van-swipe
        class="my-swipe"
        :autoplay="0"
        :width="300"
        indicator-color="#F32A23"
        @change="onSwipeChange"
      >
            <!-- <img crossorigin="anonymous" src="https://xnhstatic.hainanxinnonghui.com/uploads/20240829/1724907998537_800x800.jpg" alt=""> -->
        <van-swipe-item v-for="(item, index) in background" :key="index">
          <div class="swipe_item_img" :id="'posterHtml' + index">
            <img :src="item" alt=""/>
            <vue-qr :text="codeText" class="swipe_bottom" :margin="10"></vue-qr>

            <!-- <div class="swipe_item_text">
              <div class="swipe_item_text_top">
                <img :src="invite.avatar_url" alt=""/>{{ invite.nickname }}
              </div>
              <vue-qr :text="codeText" class="swipe_item_text_bottom"></vue-qr>
            </div> -->
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 底部 -->
     <!-- <img :src="pics[picIndex]" alt=""> -->
    <div class="invite_bom">
      <div class="invite_bom_item">
        <div class="pic">
          <img class="pic_one" src="../../images/mine/xiazai.png" alt="" />
          <img class="pic_two" :src="pics[picIndex]" alt="" />
        </div>
        <div class="text">长按保存</div>
      </div>
      <!-- <div class="invite_bom_item">
        <img src="../../images/mine/wechat.png" alt="" />
        <div>分享好友</div>
      </div> -->
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
// import 'swiper/css/pagination';
import { INVITE_CONFIG } from "@/api/mine";
import html2canvas from "html2canvas";
import VueQr from "vue-qr";
export default {
  name: "HomeView",
  components: { VueQr },
  data() {
    return {
      invite: {},
      background: [],
      codeText: "",
      pics: [],
      picIndex: 0,
    };
  },
  mounted() {
    window.scrollTo(0, 0)
    this.inviteConfig();
  },
  methods: {
     inviteConfig() {
       this.$http.get(INVITE_CONFIG).then((res) => {
        this.invite = res.data;
        this.background = res.data.background_list;
        this.codeText = res.data.invite_url;
        this.$nextTick(() => {
          setTimeout(() => {
            this.createPoster();
          }, 100);
        });
      });
    },
    createPoster() {
      const promises = this.background.map((item, index) => {
        const domObj = document.getElementById("posterHtml" + index); // 修改为每个海报的唯一ID
        let vm = this;
        return html2canvas(domObj, {
          useCORS: true,
          allowTaint: false,
          logging: false,
          letterRendering: true,
          onclone(doc) {
            let e = doc.querySelector("#posterHtml" + index);
            e.style.display = "block";
          },
        }).then(function(canvas) {
          vm.pics.push(canvas.toDataURL("image/png"));

          // console.log(canvas.toDataURL("image/png"), 'kk')
          // canvas.toBlob(function(blob) {
          //     // 创建一个链接并触发下载
          //     const link = document.createElement('a');
          //     link.href = URL.createObjectURL(blob);
          //     link.download = 'poster' + index + '.png'; // 设置下载文件名
          //     document.body.appendChild(link);
          //     link.click(); // 触发下载
          //     document.body.removeChild(link); // 移除链接
          // }, 'image/png');
        });
      });

      Promise.all(promises).then(() => {
        // console.log('所有海报已生成并保存到相册');
      });
    },
    onSwipeChange(e) {
      // console.log(e);
      this.picIndex = e;
    },
    onClickLeft() {
      this.$router.back();
    },
    // 下载
    downLoadApp() {
      window.open(this.codeText, "_blank");
    },
  },
};
</script>

<style lang="scss" scoped>
.invite_box {
  padding-top: 46px;
  background: #f2f4f5;
  min-height: calc(100vh - 46px);
  // padding-bottom: 1rem;
  ::v-deep .van-nav-bar .van-icon {
    color: #333333;
  }

  ::v-deep .van-nav-bar__arrow {
    font-size: 20px;
  }
}
.my-swipe {
  padding-top: 0.32rem;
  // height: 70vh;
  position: relative;
  overflow: hidden; /* 隐藏溢出的部分 */
  padding-bottom: 0.6rem;
}
::v-deep .van-swipe__indicator {
  width: 0.12rem;
  height: 0.12rem;
  background: #ababab;
}

.swipe_item_img {
  // width: calc(100% - 40px); /* 减去两侧的空间 */
  // margin: 0 20px; /* 左右各留出20px的空间 */
  display: flex;
  width: 90%;
  // margin: 0 auto;
  margin-left: 18%;
  justify-content: center; /* 居中对齐图片 */
  position: relative;
  .swipe_bottom{
      width: 37%;
      height:18%;
      position: absolute;
      top: 58%;
      z-index: 1;
      left: 50%;
      transform: translateX(-50%);
    }
  .swipe_item_text {
    width: 95%;
    position: absolute;
    padding: 0.3rem;
    box-sizing: border-box;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    border-radius: 10px;
    background-color: #fff;
    .swipe_item_text_top {
      width: 70%;
      color: #333;
      font-size: 0.32rem;
      padding-top: 0.2rem;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      img {
        border-radius: 50%;
        width: 0.72rem;
        height: 0.72rem;
        vertical-align: middle;
        margin-right: 0.2rem;
      }
    }

    .swipe_item_text_bottom {
      width: 1.2rem;
      height: 1.2rem;
    }
  }
}
.swipe_item_img img {
  width: 100%; 
}

.invite_bom {
  width: 100%;
  padding: 0.24rem;
  box-sizing: border-box;
  background: #fff;
  display: flex;
  // justify-content: space-b;
  position: fixed;
  bottom: 0;

  &_item {
    width: 100%;
    text-align: center;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 0.26rem;
    color: #333333;
    line-height: 0.34rem;
    font-style: normal;
    .text{
      // margin-left: 0.72rem;
      margin-top: 0.2rem;
    }
    .pic {
      position: relative;
      height: 0.72rem;
      img {
        // margin: 0 auto;
        width: 0.72rem;
        height: 0.72rem;
        margin-bottom: 0.12rem;
        margin-right: -0.72rem;
      }
      .pic_one {
        position: absolute;
        top: 0;
        left: calc(50% - 0.31rem);
      }
      .pic_two {
        position: absolute;
        top: 0;
        z-index: 999;
        opacity: 0;
        left: calc(50% - 0.31rem);
      }
    }
  }
}
</style>
